<template>
  <div>
    <!-- 设置周期 -->
    <van-popup :value="show" position="bottom" @input="$emit('update:show', $event)">
      <div class="van-popup-content">
        <div class="period-wrap">
          <div class="title">周期偏好</div>
          <div class="period-list">
            <div v-for="item in periodPreference" :key="item" class="period-item"
              :class="{ active: selectPeriod === item }" @click="selectPeriod = item">
              {{ item }}
            </div>
          </div>
        </div>
        <div class="period-wrap">
          <div class="title">
            <span>全部周期</span>
            <span class="preference" @click="handleSetPreference">编辑偏好</span>
          </div>
          <div class="period-list">
            <div v-for="item in allPeriods" :key="item" class="period-item" :class="{ active: selectPeriod === item }"
              @click="selectPeriod = item">
              {{ item }}
            </div>
          </div>
        </div>
      </div>
    </van-popup>

    <!-- 设置周期偏好 -->
    <van-popup :value="setPreference" position="bottom" @input="setPreference = false">
      <div class="van-popup-content">
        <div class="period-wrap">
          <div class="title">
            <span>选择周期偏好 {{ selectPreference.length }}/4</span>
          </div>
          <div class="period-list">
            <div v-for="item in allPeriods" :key="item" class="period-item"
              :class="{ active: selectPreference.includes(item) }" @click="handleSelectPreference(item)">
              {{ item }}
            </div>
          </div>
        </div>
        <div class="buttons">
          <van-button round @click="selectPreference = [...defaultPreference]">重置</van-button>
          <van-button round @click="handleSavePreference">确认</van-button>
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Popup } from "vant";

export default {
  name: 'Period',
  components: {
    [Popup.name]: Popup,
  },
  props: {
    show: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      setPreference: false, //设置周期偏好
      defaultPreference: ['15分', '1小时', '4小时', '1日'], //默认偏好
      allPeriods: ['分时', '1秒', '1分', '3分', '5分', '15分', '30分', '1小时', '2小时', '4小时', '6小时', '12小时', '1日', '2日', '3日', '5日', '1周', '1月', '3月'], //全部周期
      periodPreference: [], //周期偏好
      selectPeriod: '', //选中的周期
      selectPreference: [] //选中的偏好
    }
  },
  methods: {
    handleClick() {
      this.$emit('update:show', false);
    },
    handleSetPreference() {
      this.setPreference = true;
    },
    handleSelectPreference(item) {
      const index = this.selectPreference.indexOf(item);
      if (index > -1) {
        this.selectPreference.splice(index, 1);
      } else {
        if (this.selectPreference.length < 4) {
          this.selectPreference.push(item);
        } else {
          this.$toast('最多选择4个周期偏好');
        }
      }
    },
    handleSavePreference() {
      this.periodPreference = [...this.selectPreference];
      this.setPreference = false;
    }
  },
  created() {
    this.periodPreference = [...this.defaultPreference];
    this.selectPreference = [...this.periodPreference];
  }
}
</script>

<style lang="scss" scoped>
::v-deep .van-popup {
  // width: 92% !important;
  background: #121212 !important;
  border-radius: 40px 40px 0 0;

  .van-popup-content {
    padding: 40px 30px;
    padding-bottom: 60px;
    background: #121212;
    color: #fff;
    display: grid;
    gap: 20px;
    position: relative;
    overflow: hidden;

    .period-wrap {
      margin-bottom: 34px;

      .title {
        font-size: 32px;
        margin-bottom: 34px;
        display: flex;
        align-items: end;
        justify-content: space-between;

        .preference {
          color: #888888;
          font-size: 24px;
        }
      }

      .period-list {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 16px;

        .period-item {
          height: 66px;
          border: 1px solid #323232;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 28px;
          border-radius: 6px;
          transition: all 0.1s;
        }

        .active {
          border-color: #fff;
        }
      }
    }

    .buttons {
      width: 100%;
      display: flex;
      justify-content: space-between;
      gap: 20px;

      .van-button {
        width: 100%;
      }

      .van-button:first-child {
        background: transparent;
        border: 1px solid #323232;
        color: #fff;
      }

      .van-button:last-child {
        background: #fff;
        color: #121212;
      }
    }
  }
}
</style>